<template>
    <div class="hall_bg">
        <Header />

        <section class="hall_bg--user_sction">
            <span v-for="(player, index) in players" :key="index" class="player_item" @click="addPlayer(index)">
                <img v-if="player.avatar" :src="player.avatar" alt="avatar" />
                <img v-else src="@/assets/add.svg" alt="avatar" class="avatar_img" />
            </span>
        </section>

        <section class="operate_section">
            <img src="@/assets/chart.svg" alt="chart" @click="onChartClick" />
            <span class="play-game-btn" @click="startPlay">开始</span>
            <img src="@/assets/setting.svg" alt="setting" @click="onSettingClick" />
        </section>
    </div>

    <a-drawer :title="title" placement="bottom" :open="!!opened" class="my-drawer" @close="onClose">
        <template v-if="opened === 2" #extra>
            <a-button type="primary" @click="onClose">确定</a-button>
        </template>
        <div class="drawer-content">
            <!-- <p>Some contents...</p>
            <p>Some contents...</p>
            <p>Some contents...</p> -->
        </div>
    </a-drawer>
</template>

<script setup lang="ts">
import { message } from 'ant-design-vue';

import { random } from '@/utils';
import avatarArray from '@/assets/avatar';
import { usePlayerStore } from '@/store';
import type { IPlayer } from '@/store';

const router = useRouter();

const players = reactive<Array<IPlayer>>([
    { id: 0, name: '玩家一', avatar: avatarArray[random(0, 3)] },
    { id: 1, name: '玩家二' },
    { id: 2, name: '玩家三' },
    { id: 3, name: '玩家四' },
]);

const generateImg = () => {
    // 保证不会进入死循环
    let count = 0;
    let ind = random(0, 3);
    while (players.findIndex((i) => i.avatar === avatarArray[ind]) >= 0 && count < 5) {
        ind += 1;
        if (ind >= 4) {
            ind = 0;
        }
        count++;
    }

    return avatarArray[ind];
};

const addPlayer = (index: number) => {
    if (!players[index].avatar) {
        const ind = players.findIndex((item) => !item.avatar);
        players[ind].avatar = generateImg();
    }
};

const startPlay = () => {
    if (players.filter((i) => i.avatar).length < 2) {
        return message.error('玩家至少要有两名！');
    }
    usePlayerStore().setPalyers(players);
    router.push('/game');
};

const opened = ref<number>(0);
const title = ref<string>('对局结果');
const onChartClick = () => {
    opened.value = 1;
    title.value = '对局结果';
};

const onSettingClick = () => {
    opened.value = 2;
    title.value = '局内设置';
};

const onClose = () => {
    opened.value = 0;
};
</script>

<style lang="less">
.hall_bg {
    background: url(@/assets/hall_bg.jpg) no-repeat center / 100% 100%;
    width: 100%;
    /* prettier-ignore */
    max-width: 750PX;
    height: 100vh;
    padding: 80px 40px;
    margin: 0 auto;

    .hall_bg--user_sction {
        margin: 300px auto 0;
        padding: 0 80px;
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
        row-gap: 100px;

        .player_item {
            display: inline-block;
            width: 34%;
            aspect-ratio: 1 / 1;
            border-radius: 50%;
            background-color: #38434d;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;

            img {
                width: 100%;
                height: 100%;
            }

            .avatar_img {
                width: 50%;
                height: 50%;
            }
        }
    }

    .operate_section {
        display: flex;
        justify-content: space-around;
        margin: 300px auto 0;

        img {
            width: 120px;
        }

        .play-game-btn {
            display: inline-block;
            width: 300px;
            height: 300px;
            background-color: #20ae56;
            border-radius: 50%;
            position: relative;
            color: #fff;
            text-align: center;
            font-size: 100px;
            line-height: 300px;
            font-weight: bold;
            transition: all 0.3s;

            &:active {
                box-shadow: 0 0 38px 0 #20ae56;
            }
        }
    }
}

.my-drawer {
    .ant-drawer-wrapper-body {
        .ant-drawer-header {
            background-color: #273138;
            .ant-drawer-header-title .ant-drawer-title {
                color: #fff;
            }

            .anticon.anticon-close {
                svg {
                    color: #fff;
                }
            }
        }

        .ant-drawer-body {
            background-color: #273138;

            .drawer-content {
                &:empty::after {
                    content: '暂无对局数据';
                    display: block;
                    color: #fff;
                    text-align: center;
                    margin-top: 120px;
                }
            }
        }
    }
}
</style>
